<template>
	<view class="page-user">
		<!-- 表单 start -->
		<view v-if="!loading" class="pay_main">
			<view class="pay_title">
				第一步：先获取手机验证码
			</view>
			<view class="text-df text-666 margin-bottom">
				绑定的用户手机{{ mobileX || "" }}
			</view>
			<view class="flex align-center margin-bottom">
				<text class="text-df text-666 padding-right-sm">验证码</text>
				<input class="flex-sub" type="number" value="" v-model="code" placeholder="请输入验证码" maxlength="4"
					placeholder-style="color:#BFBFBF;font-size:28rpx;" />
				<view class="get-code" @click="getCode()" :style="{color:this.getCodeBtnColor}">{{ getCodeText }}</view>
			</view>
			<view class="line-1"></view>
			<!-- <view class="pay_title">
				第二步：上传微信收款二维码
			</view>
			<view class="load-img">
				<view v-if="logo" class="uploadImg" @click="ChooseImage">
					<fu-image :src="logo" mode="aspectFill"></fu-image>
				</view>
				<image v-else @click="ChooseImage" class="uploadImg" src="../../static/up.png" mode="aspectFill">
				</image>
				<view class="text-df text-666 margin-tb-sm">上传二维码</view>
			</view> -->

			<view class="pay_title">
				第二步：填写微信真实姓名
			</view>
			<view class="flex align-center padding-bottom">
				<text class="text-df text-666 padding-right-sm">真实姓名</text>
				<input class="flex-sub" type="text" value="" v-model="name" placeholder="请填写真实姓名" maxlength="8"
					placeholder-style="color:#BFBFBF;font-size:28rpx;" />
			</view>
			<!-- <view class="flex align-center padding-bottom">
				<text class="text-df text-666 padding-right-sm">提现账户</text>
				<input class="flex-sub" type="text" value="" v-model="account_id" placeholder="请输入提现账户"
					placeholder-style="color:#BFBFBF;font-size:28rpx;" />
			</view> -->
		</view>
		<!-- 表单 end -->

		<!-- 提交按钮 -->
		<view v-if="!loading" class="bottom_btn" @click="tijiao">提交</view>
		<!-- 断网检查 -->
		<fu-notwork></fu-notwork>
		<!-- 加载状态 -->
		<!-- <fu-loading v-if="loading"></fu-loading> -->
	</view>
</template>

<script>
	/**
	 * @author LLF
	 */
	// @see 引入上传图片
	import {
		UploadImage
	} from '@/common/utils/index';
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	// @see 引入验证方法
	import {
		validate
	} from "@/common/utils/index.js";
	export default {
		data() {
			return {
				name: '', // {String} 姓名
				is_click: false, // {Boolean} 是否点击
				logo: '',
				count: 1, // {Number} 选择几个图片
				images: [], // {Array.<Object>} 上传的图片
				mobile: '', // {String} 手机号
				mobileX: '', //{String} 当前手机号添加*号之后的显示
				loading: true, // {Boolean} 加载中
				account_id: '', //提现账户
				code: "", // {String} 验证码
				getCodeText: "获取验证码", // {String} 获取验证码按钮的文字
				getCodeisWaiting: false, // {Boolean} 获取验证码时的加载状态
				getCodeBtnColor: '#FF6464', // {String} 获取验证码按钮的颜色
				code_id: 0, // {Number} 用户是否已获取验证码
			};
		},
		onLoad() {
			this.getMobile();
			this.Detail();
		},
		methods: {
			/**
			 * @description 获取手机号
			 */
			getMobile() {
				this.$api.post(global.apiUrls.postUserGet_user_phone, {}).then((res) => {
					var mobile =
						res.data.data.substr(0, 3) + "****" + res.data.data.substr(7);
					this.mobile = res.data.data;
					this.mobileX = mobile;
				});
			},
			/**
			 * @event
			 * @description 获取验证码
			 */
			getCode() {
				uni.hideKeyboard();
				if (this.getCodeisWaiting) return;
				if (!validate(this.mobile, "phone")) {
					this.$message.info(
						!this.mobile ? "请输入手机号" : "请填写正确手机号码"
					);
					return false;
				}
				this.getCodeText = "发送中...";
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#BFBFBF";
				let user_id = uni.getStorageSync("USER_INFO").id;
				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						is_test: global.IS_DEV,
						mobile: this.mobile,
						type: "6",
						user_id: user_id,
					})
					.then((res) => {
						var res = res.data;
						console.log(res);
						// this.$message.info(res.msg)
						if (res.code == 1) {
							this.code_id = 1;
							if (global.IS_DEV) {
								this.$message.info("验证码为" + res.data.code + "请注意查收");
							} else {
								this.$message.info(res.data.msg)
							}
							this.setTimer();
						} else {
							this.getCodeText = "获取验证码";
							this.getCodeBtnColor = "#FF6464";
							this.getCodeisWaiting = false;
						}
					});
			},
			/**
			 * @description 获取验证码的倒计时
			 */
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)";
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#FF6464";
						this.getCodeText = "获取验证码";
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")";
					holdTime--;
				}, 1000);
			},

			/**
			 * @function
			 * @description 从相册中选择图片
			 */
			ChooseImage() {
				let self = this;
				// 从相册中选择图片
				uni.chooseImage({
					count: this.count - this.images.length, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImage(tempFilePaths, {
							complete: function(res) {
								// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
								console.log(JSON.stringify(res), 'UploadImage')
								// self.images.push(...res);
								self.logo = res[0].path;
								// self.logo = res.tempFilePaths[0];
							}
						})
					}
				});
			},
			/**
			 * @function
			 * @description 获取用户的绑定信息
			 */
			Detail() {
				let _this = this;
				_this.$api.post(global.apiUrls.getMerchantWithdrawAccount, {
						account_type: 1
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							_this.name = res.data.data.true_name;
							_this.logo = res.data.data.qrcode;
							// _this.account_id = res.data.data.account_id;
						}
						_this.loading = false
					}).catch(err => {
						console.log(err, 'get_withdraw_account')
					})
			},
			/**
			 * @event
			 * @description 点击提交按钮请求接口
			 */
			async tijiao() {
				let reg = /^[\u0391-\uFFE5]+$/;
				let _this = this
				if (_this.is_click) {
					return
				}
				let regs = new RegExp(
				"^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
				let arrs = /^[0-9]*$/
				//验证微信账号  邮箱或者手机号
				let regAliyun = /^(?:1[2-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
				let str = 0
				// let regBiao=/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
				let num = 0

				// 验证
				if (!_this.code_id) {
					_this.$message.info("请先获取验证码");
					return false;
				}
				if (!_this.code) {
					_this.$message.info("请输入验证码");
					return false;
				}
				// if (!_this.logo) {
				// 	_this.$message.info('收款码未上传');
				// 	return false;
				// }
				// if (!reg.test(_this.name)) {
				// 	_this.$message.info('姓名输入有误');
				// 	_this.$message.info(
				// 		!_this.name ? "请输入真实姓名" : "真实姓名输入有误"
				// 	);
				// 	return
				// }
				if (!_this.name) {
					_this.$message.info(
						!_this.name ? "请输入真实姓名" : "真实姓名输入有误"
					);
					return
				}
				// if(!regBiao.test(_this.name)){
				// 	_this.$message.info('姓名不能输入表情');
				// 	return
				// }
				if (!regAliyun.test(_this.mobile)) {
					_this.$message.info(
						!_this.mobile ? "请正确输入手机号" : "请填写正确手机号码"
					);
					return;
				}
				// if (!this.account_id.trim()) {
				// 	_this.$message.info('请输入提现账户');
				// }
				
				_this.is_click = true;

				_this.$api.post(global.apiUrls.postBindingShopWithdrawalAccount, {
					"code": _this.code,
					"type": 6,
					"qrcode": _this.logo,
					"true_name": _this.name,
					// "account_id": _this.account_id,
					"account_type": 1,
					"phone": this.mobile
				}).then(res => {
					if (res.data.code == 1) {
						_this.$message.info("提交成功")
						setTimeout(() => {
							uni.navigateBack();
						}, 300)
					}else {
						_this.$message.info(res.data.msg)
					}
					_this.is_click = false;
				}).catch(err => {
					_this.is_click = false;
					console.log(err, 'bind_withdraw_account')
				})
			}
		}
	};
</script>

<style lang="scss">
	.page-user {
		min-height: 100%;
		// position: relative;
	}

	.line-1 {
		display: block;
		height: 1rpx;
		background: #EEEEEE;
	}

	.pay_main {
		padding: 0 32rpx;
		background-color: #FFFFFF;

		.pay_title {
			line-height: 112rpx;
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.get-code {
		font-size: 28rpx;
		color: #FF6464;
	}

	.load-img {
		.uploadImg {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.bottom_btn {
		width: calc(100% - 64upx);
		height: 88upx;
		background: $theme;
		border-radius: 44upx;
		font-size: 32upx;
		color: white;
		line-height: 88upx;
		text-align: center;
		position: absolute;
		bottom: 60rpx;
		left: 32rpx;
	}
</style>
